﻿@model StudentCreateViewModel
@inject IStudentRepository _studentRepository
@{ ViewBag.Title = "创建学生信息"; }

@* 请记得给form表单添加属性 enctype="multipart/form-data"*@
<form enctype="multipart/form-data" asp-controller="home" asp-action="create" method="post" class="mt-3">
    <div asp-validation-summary="All" class="text-danger"></div>

    <div class="form-group row">
        <label asp-for="Name" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <input asp-for="Name" class="form-control" placeholder="请输入名字" />
            <span asp-validation-for="Name" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group row">
        <label asp-for="Email" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <input asp-for="Email" class="form-control" placeholder="请注入邮箱地址" />
            <span asp-validation-for="Email" class="text-danger"></span>
        </div>
    </div>

    <div class="form-group row">
        <label asp-for="Major" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <select asp-for="Major"
                    class="custom-select mr-sm-2"
                    asp-items="Html.GetEnumSelectList<MajorEnum>()">
                <option value="">请选择</option>
            </select>
            <span asp-validation-for="Major" class="text-danger"></span>
        </div>
    </div>
    @* 我们使用了asp-for的taghelper设置input的属性为"Photos"。
        "Photos"属性类型是list<IFormFile>，这样就支持多文件上传了
        ， 所以在运行的时候ASP.NET Core会将该标签生成上传控件(input type=file) *@
    <div class="form-group row">
        <label asp-for="Photos" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <div class="custom-file">
                <input asp-for="Photos" multiple class="form-control custom-file-input">
                <label class="custom-file-label">请选择照片....</label>
            </div>
        </div>
    </div>

    <div class="form-group row">
        <div class="col-sm-10">
            <button type="submit" class="btn btn-primary">创建</button>
        </div>
    </div>

    <div class="form-group row">
        <div class="col-sm-10">
            学生总人数 = @_studentRepository.GetAllStudents().Count().ToString()
        </div>
    </div>

    @*以下JavaScript代码是必须的，它的作用是 -
        如果选择了单个文件，则显示该文件的名称。 -
        如果多个选择文件，然后显示文件数量。 *@
    @section Scripts {
        <script>
            $(document).ready(function () {
                $(".custom-file-input").on("change", function () {
                    //console.log($(this)); //可以取消这里打印看看this中的值。
                    var fileLabel = $(this).next(".custom-file-label");
                    var files = $(this)[0].files;
                    if (files.length > 1) {
                        fileLabel.html("您已经选择了：" + files.length + " 个文件");
                    } else if (files.length == 1) {
                        fileLabel.html(files[0].name);
                    }
                });
            });
        </script>
    }
</form>